<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String basePath = request.getScheme() +
            "://"
            + request.getServerName() + ":"
            + request.getServerPort()
            + request.getContextPath() + "/";
%>
<!DOCTYPE html>
<html>
<head>
    <base href="<%=basePath%>">
    <meta charset="UTF-8">
    <link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
    <link href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" type="text/css" rel="stylesheet" />

    <script type="text/javascript" src="jquery/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
    <script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>

    <link rel="stylesheet" type="text/css" href="jquery/bs_pagination/jquery.bs_pagination.min.css">
    <script type="text/javascript" src="jquery/bs_pagination/jquery.bs_pagination.min.js"></script>
    <script type="text/javascript" src="jquery/bs_pagination/en.js"></script>

    <script type="text/javascript">

        $(function (){
            pageList(1,10);
            $("#addBtn").click(function (){
                $(".time").datetimepicker({
                    minView: "month",
                    language:  'zh-CN',
                    format: 'yyyy-mm-dd',
                    autoclose: true,
                    todayBtn: true,
                    pickerPosition: "bottom-left"
                });
                $("#createQuestionModal").modal("show");
            })


            $("#saveBtn").click(function (){
                $.ajax({
                    url:"workbench/teacher/practice/addQuestion.do",
                    data:{
                         "head":$("#create_question_head").val(),
                         "answerA":$("#create_question_answerA").val(),
                         "answerB":$("#create_question_answerB").val(),
                         "answerC":$("#create_question_answerC").val(),
                         "answerD":$("#create_question_answerD").val(),
                         "right_answer":$("#create_question_rightAnswer").val(),
                         "teacherId":$("#create_teacher").val(),
                         "type":$("#create_question_type").val(),
                         "createTime":$("#create_createDate").val()
                    },
                    dataType:"json",
                    type:"post",
                    success:function (data){
                        if(data.success){
                            pageList(1,$("#questionPage").bs_pagination('getOption', 'rowsPerPage'));
                            $("#QuestionAddForm")[0].reset();
                            alert(data.msg)
                            //    关闭模态窗口
                            $("#createQuestionModal").modal("hide");
                        }else {
                            alert(data.msg)
                        }
                    }
                })

            })

            $("#qx").click(function (){
                $("input[name=xz]").prop("checked",this.checked);
            })

            $("#questionBody").on("click",$("input[name=xz]"),function (){
                $("#qx").prop("checked",$("input[name=xz]").length==$("input[name=xz]:checked").length);
            })

            $("#searchBtn").click(function (){
                pageList(1,3);
            })


            $("#editBtn").click(function (){
                var $xz = $("input[name=xz]:checked");
                if($xz.length==0){
                    alert("请选择需要修改的记录")
                }else if($xz.length>1){
                    alert("您只能选择一条记录修改");
                }else {
                    var qid=$xz.val();
                    $.ajax({
                        url:"workbench/teacher/practice/getQuestionById.do",
                        data:{
                            "qid":qid
                        },
                        dataType:"json",
                        type:"get",
                        success:function (data){
                            //	处理题目
                            $("#edit_questionId").val(data.dataList[0].qid);
                            $("#edit_question_head").val(data.dataList[0].head);
                            $("#edit_question_type").val(data.dataList[0].type);
                            $("#edit_question_answerA").val(data.dataList[0].answerA);
                            $("#edit_question_answerB").val(data.dataList[0].answerB);
                            $("#edit_question_answerC").val(data.dataList[0].answerC);
                            $("#edit_question_answerD").val(data.dataList[0].answerD);
                            $("#edit_question_rightAnswer").val(data.dataList[0].right_answer);
                            $("#edit_createDate").val(data.dataList[0].createTime);

                            //	所有的值都填写好之后，打开修改操作的模态窗口
                            $("#editQuestionModal").modal("show");

                        }
                    })
                }

            })

            $("#updateBtn").click(function (){
                $.ajax({
                    url:"workbench/teacher/practice/update.do",
                    data:{
                        "qid":$("#edit_questionId").val(),
                        "head":$("#edit_question_head").val(),
                        "type":$("#edit_question_type").val(),
                        "answerA":$("#edit_question_answerA").val(),
                        "answerB":$("#edit_question_answerB").val(),
                        "answerC":$("#edit_question_answerC").val(),
                        "answerD":$("#edit_question_answerD").val(),
                        "right_answer":$("#edit_question_rightAnswer").val(),
                        "teacherId":$("#edit_teacher").val(),
                        "createTime":$("#edit_createDate").val()
                    },
                    dataType: "json",
                    type: "post",
                    success:function (data){
                        //    返回成功或者失败就可以
                        if(data.success){
                            alert(data.msg)
                            //修改操作后，应该维持到当前页，维持每页展现的记录数
                            pageList($("#questionPage").bs_pagination('getOption', 'currentPage')
                                ,$("#questionPage").bs_pagination('getOption', 'rowsPerPage'));

                            //    关闭模态窗口
                            $("#editQuestionModal").modal("hide")
                        }else {

                            alert(data.msg)
                        }
                    }
                })
            })


            //为删除事件绑定事件
            $("#deleteBtn").click(function (){
                //	找到复选框中所有打勾的复选框的jquery 对象
                var $xz=$("input[name=xz]:checked");
                if($xz.length==0){
                    alert("请选择需要删除的记录");
                }else {
                    if (confirm("您确定要删除所选择的数据嘛")) {
                        var param = "";
                        //将$xz中的每一个dom对象遍历出来，取其value值，就相当于取得了需要删除的记录的id
                        for (var i = 0; i < $xz.length; i++) {
                            param += "qid=" + $($xz[i]).val();
                            //	如果不是最后一个元素，需要在后面追加一个&符
                            if (i < $xz.length - 1) {
                                param += "&";
                            }
                        }
                    }
                    $.ajax({
                        url:"workbench/teacher/practice/delete.do",
                        data:param,
                        dataType:"json",
                        type:"post",
                        success:function (data){
                            //	返回成功或者失败就可以
                            if(data.success){
                                alert(data.msg)
                                //回到第一页，维持每页展现的记录数
                                pageList(1,$("#questionPage").bs_pagination('getOption', 'rowsPerPage'));
                            }else {
                                alert(data.msg)
                                for (var i = 0; i < $xz.length; i++) {
                                    $($xz[i]).prop("checked",false);
                                }
                            }
                        }
                    })
                }
            })


        })


        function pageList(pageNo, pageSize) {
            var head=$.trim($("#search_questionHead").val());
            var createTime=$.trim($("#search_createDate").val());

            $.ajax({
                url: "workbench/teacher/practice/pageList.do",
                data: {
                    "pageNo": pageNo,
                    "pageSize": pageSize,
                    "head":head ,
                    "createTime":createTime
                },
                dataType: "json",
                type: "get",
                success:function (data){
                 var html="";
                 $.each(data.dataList,function (i,n){
                   html+='  <tr class="active">',
                   html+='  <td><input name="xz" type="checkbox" value="'+n.qid+'"/></td>',
                   html += '<td>' + n.qid + '</td>';
                   html+='  <td><a style="text-decoration: none; cursor: pointer;" onclick="showContent(\''+n.qid+'\')">'+n.head+'</a></td>',
                   html+='  <td>'+n.teacherId+'</td>',
                   html+='  <td>'+n.createTime+'</td>',
                   html+='  </tr>'
                 })
                    $("#questionBody").html(html);
                    var totalPages=Math.ceil(data.total/pageSize);
                    $("#questionPage").bs_pagination({
                        currentPage: pageNo, // 页码
                        rowsPerPage: pageSize, // 每页显示的记录条数
                        maxRowsPerPage: 20, // 每页最多显示的记录条数
                        totalPages: totalPages, // 总页数
                        totalRows: data.total, // 总记录条数

                        visiblePageLinks: 5, // 显示几个卡片

                        showGoToPage: true,
                        showRowsPerPage: true,
                        showRowsInfo: true,
                        showRowsDefaultInfo: true,

                        /*该回调函数是在点击分页组件时候触发的*/
                        onChangePage : function(event, data){
                            pageList(data.currentPage , data.rowsPerPage);
                        }
                    });

                }
            })

            $("#qx").prop("checked",false);
        }

        function showContent(qid) {
            $.ajax({
                url:"workbench/teacher/practice/getQuestionById.do",
                data:{
                    "qid":qid
                },
                dataType:"json",
                type:"get",
                success:function (data){
                    //	处理题目
                    $("#check_questionId").val(data.dataList[0].qid);
                    $("#check_question_head").val(data.dataList[0].head);
                    $("#check_question_type").val(data.dataList[0].type);
                    $("#check_question_answerA").val(data.dataList[0].answerA);
                    $("#check_question_answerB").val(data.dataList[0].answerB);
                    $("#check_question_answerC").val(data.dataList[0].answerC);
                    $("#check_question_answerD").val(data.dataList[0].answerD);
                    $("#check_question_rightAnswer").val(data.dataList[0].right_answer);
                    $("#check_createDate").val(data.dataList[0].createTime);

                    //	所有的值都填写好之后，打开修改操作的模态窗口
                    $("#checkQuestionModal").modal("show");

                }
            })
        }
    </script>
</head>
<body>

<!-- 修改模态窗口 -->
<div class="modal fade" id="editQuestionModal" role="dialog">
    <div class="modal-dialog" role="document" style="width: 85%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="myModalLabel2">修改题目</h4>
            </div>
            <div class="modal-body">

                <form class="form-horizontal" role="form">

                    <input type="hidden" id="edit_questionId">

                    <div class="form-group">
                        <label for="edit_teacher" class="col-sm-2 control-label">创建者<span style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <select class="form-control" id="edit_teacher">
                                 <option value="${user.teacherId}">${user.name}</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="edit_question_head" class="col-sm-2 control-label">题目描述<span style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="edit_question_head">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="edit_question_type" class="col-sm-2 control-label">题目类型<span style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <select id="edit_question_type" class="form-control">
                                <option value="加法">加法</option>
                                <option value="减法">减法</option>
                                <option value="乘法">乘法</option>
                                <option value="除法">除法</option>
                                <option value="英语题">英语题</option>
                                <option value="应用题">应用题</option>
                            </select>
                           <%-- <input type="text" class="form-control" id="edit_question_type">--%>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="edit_question_answerA" class="col-sm-2 control-label">答案A</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control " id="edit_question_answerA" >
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="edit_question_answerB" class="col-sm-2 control-label ">答案B</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control " id="edit_question_answerB" >
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="edit_question_answerC" class="col-sm-2 control-label ">答案C</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control " id="edit_question_answerC" >
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="edit_question_answerD" class="col-sm-2 control-label ">答案D</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control " id="edit_question_answerD" >
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="edit_question_rightAnswer" class="col-sm-2 control-label ">正确答案</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <select id="edit_question_rightAnswer" class="form-control">
                                <option value="A">A</option>
                                <option value="B">B</option>
                                <option value="C">C</option>
                                <option value="D">D</option>
                            </select>
                            <%--<input type="text" class="form-control " id="edit_question_rightAnswer" >--%>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="edit_createDate" class="col-sm-2 control-label">创建日期</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control time" id="edit_createDate" readonly>
                        </div>
                    </div>

                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button id="updateBtn" type="button" class="btn btn-primary">更新</button>
            </div>
        </div>
    </div>
</div>

<!-- 创建模态窗口 -->
<div class="modal fade" id="createQuestionModal" role="dialog">
    <div class="modal-dialog" role="document" style="width: 85%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="myModalLabel1">创建题目</h4>
            </div>
            <div class="modal-body">

                <form id="QuestionAddForm" class="form-horizontal" role="form">

                    <div class="form-group">
                        <label for="create_teacher" class="col-sm-2 control-label">创建者<span style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <select class="form-control" id="create_teacher">
                                <option value="${user.teacherId}">${user.name}</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="create_question_head" class="col-sm-2 control-label">题目描述<span style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="create_question_head">
                        </div>
                    </div>


                    <div class="form-group">
                        <label for="create_question_type" class="col-sm-2 control-label">题目类型<span style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <select id="create_question_type" class="form-control">
                                <option value="加法">加法</option>
                                <option value="减法">减法</option>
                                <option value="乘法">乘法</option>
                                <option value="除法">除法</option>
                                <option value="英语题">英语题</option>
                                <option value="应用题">应用题</option>
                            </select>
                            <%--<input type="text" class="form-control" id="create_question_type">--%>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="create_question_answerA" class="col-sm-2 control-label">答案A</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control " id="create_question_answerA" >
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="create_question_answerB" class="col-sm-2 control-label ">答案B</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control " id="create_question_answerB">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="create_question_answerC" class="col-sm-2 control-label ">答案C</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control " id="create_question_answerC" >
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="create_question_answerD" class="col-sm-2 control-label ">答案D</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control " id="create_question_answerD">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="create_question_rightAnswer" class="col-sm-2 control-label ">正确答案</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <select id="create_question_rightAnswer" class="form-control">
                                <option value="A">A</option>
                                <option value="B">B</option>
                                <option value="C">C</option>
                                <option value="D">D</option>
                            </select>
                           <%-- <input type="text" class="form-control " id="create_question_rightAnswer" >--%>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="create_createDate" class="col-sm-2 control-label">创建日期</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control time" id="create_createDate" readonly>
                        </div>
                    </div>
                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="saveBtn">保存</button>
            </div>
        </div>
    </div>
</div>


<!-- 查看详细信息模态窗口 -->
<div class="modal fade" id="checkQuestionModal" role="dialog">
    <div class="modal-dialog" role="document" style="width: 85%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="myModalLabel3">查看题目</h4>
            </div>
            <div class="modal-body">

                <form class="form-horizontal" role="form">

                    <input type="hidden" id="check_questionId">

                    <div class="form-group">
                        <label for="check_teacher" class="col-sm-2 control-label">创建者<span style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <select class="form-control" id="check_teacher" >
                                <option value="${user.teacherId}">${user.name}</option>
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="check_question_head" class="col-sm-2 control-label">题目描述<span style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="check_question_head" readonly>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="check_question_type" class="col-sm-2 control-label">题目类型<span style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="check_question_type" readonly>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="check_question_answerA" class="col-sm-2 control-label">答案A</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control " id="check_question_answerA" readonly>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="check_question_answerB" class="col-sm-2 control-label ">答案B</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control " id="check_question_answerB" readonly>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="check_question_answerC" class="col-sm-2 control-label ">答案C</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control " id="check_question_answerC" readonly>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="check_question_answerD" class="col-sm-2 control-label ">答案D</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control " id="check_question_answerD" readonly>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="check_question_rightAnswer" class="col-sm-2 control-label ">正确答案</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control " id="check_question_rightAnswer" readonly>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="check_createDate" class="col-sm-2 control-label">创建日期</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control time" id="check_createDate" readonly>
                        </div>
                    </div>

                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>



<div>
    <div style="position: relative; left: 10px; top: -10px;">
        <div class="page-header">
            <h3>题库列表</h3>
        </div>
    </div>
</div>
<div style="position: relative; top: -20px; left: 0px; width: 100%; height: 100%;">
    <div style="width: 100%; position: absolute;top: 5px; left: 10px;">

        <div class="btn-toolbar" role="toolbar" style="height: 80px;">
            <form class="form-inline" role="form" style="position: relative;top: 8%; left: 5px;">

                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">题目描述</div>
                        <input id="search_questionHead" class="form-control" type="text">
                    </div>
                </div>


                <div class="form-group">
                    <div class="input-group">
                        <div class="input-group-addon">创建日期</div>
                        <input class="form-control time" type="text" id="search_createDate" />
                    </div>
                </div>

                <button id="searchBtn" type="button" class="btn btn-default">查询</button>

            </form>
        </div>
        <div class="btn-toolbar" role="toolbar" style="background-color: #F7F7F7; height: 50px; position: relative;top: 5px;">
            <div class="btn-group" style="position: relative; top: 18%;">
                <button id="addBtn" type="button" class="btn btn-primary" ><span class="glyphicon glyphicon-plus"></span> 创建</button>
                <button id="editBtn" type="button" class="btn btn-default" ><span class="glyphicon glyphicon-pencil"></span> 修改</button>
                <button id="deleteBtn" type="button" class="btn btn-danger"><span class="glyphicon glyphicon-minus"></span> 删除</button>
            </div>

        </div>
        <div style="position: relative;top: 10px;">
            <table class="table table-hover">
                <thead>
                <tr style="color: #B3B3B3;">
                    <td><input id="qx" type="checkbox" /></td>
                    <td>题目编号</td>
                    <td>题目描述</td>
                    <td>创建者</td>
                    <td>创建日期</td>
                </tr>
                </thead>
                <tbody id="questionBody">

                </tbody>
            </table>
        </div>

        <div style="height: 50px; position: relative;top: 30px;">

            <div id="questionPage"></div>

        </div>

    </div>

</div>
</body>
</html>